import type { App } from 'vue'
import type { RouteRecordRaw } from 'vue-router'

import { createRouter, createWebHistory } from 'vue-router'

const MallLayout = () => import('@/mall-layout/layout.vue')

export const constantRouterMap: AppRouteRecordRaw[] = [
    {
        children: [
            {
                component: () => import('@/pages/go/index.vue'),
                meta: {
                    title: '首页-home',
                },
                name: 'root-index',
                path: '',
            },
            {
                component: () => import('@/pages/supply/index.vue'),
                meta: {
                    title: '找供应商',
                },
                name: 'supply',
                path: 'supply',
            },
            {
                component: () => import('@/pages/supply/show.vue'),
                meta: {
                    title: '供应商详情',
                },
                name: 'supply-show',
                path: 'supply/:id',
            },
        ],
        component: MallLayout,
        meta: {
            hidden: true,
            noTagsView: true,
            title: '首页',
        },
        name: 'root',
        path: '/',
    },
    {
        children: [
            {
                component: () => import('@fl/views/redirect/redirect.vue'),
                meta: {},
                name: 'Redirect',
                path: '/redirect/:path(.*)',
            },

            {
                component: () => import('@fl/views/error/404.vue'),
                meta: {
                    hidden: true,
                    noTagsView: true,
                    title: '404',
                },
                name: 'NoFind',
                path: '/404',
            },
        ],
        component: MallLayout,
        meta: {
            hidden: true,
            noTagsView: true,
        },
        name: 'Redirect',
        path: '/redirect',
    },
    // {
    //     children: [
    //         {
    //             component: () => import('@fl/origin-components/Personal/PersonalCenter.vue'),
    //             meta: {
    //                 hidden: true,
    //                 title: '个人中心',
    //             },
    //             name: 'PersonalCenter',
    //             path: 'personal-center',
    //         },
    //     ],
    //     component: MallLayout,
    //     meta: {
    //         hidden: true,
    //         title: '个人中心',
    //     },
    //     name: 'Personal',
    //     path: '/personal',
    //     redirect: '/personal/personal-center',
    // },

]

export const asyncRouterMap: AppRouteRecordRaw[] = []
const router = createRouter({
    history: createWebHistory(),
    routes: constantRouterMap as RouteRecordRaw[],
    scrollBehavior: () => ({ left: 0, top: 0 }),
    strict: true,
})

export function resetRouter(): void {
    const resetWhiteNameList = ['Redirect', 'Login', 'NoFind', 'Root']
    router.getRoutes().forEach((route) => {
        const { name } = route
        if (name && !resetWhiteNameList.includes(name as string))
            router.hasRoute(name) && router.removeRoute(name)
    })
}

export function setupRouter(app: App<Element>) {
    app.use(router)
}

export default router
